偽(Pseudo)這個意思有虛幻虛無的意思,類選擇器是用來處理 DOM 操作不了選擇器,偽元素則是原本並沒有在 HTML DOM 中,是透過 CSS 創造出來的元素。
前面篇章有提到 CSS 選擇器,通常都能單獨使用,而偽類選擇器比較特別,他必須搭配其他選擇器來使用,我們常使用的操作型偽類在觸發條件前,一切都是假的!平時並不會有效果,最常見的範例就是<a>
標籤。
這邊將舉出最常見的偽類選擇器與使用方法,還有許多偽類選擇器可以查看 MDN 官方文件
使用方法需在前面加:
前綴,以<a>
標籤作為範例:a:hover { css... }
:hover
,當游標懸浮在元素上時,產生效果,最常見的使用方式。
:active
,當游標對著元素壓住時,產生效果,通常使用在按鈕類型的元件。
:focus
,當元素是焦點狀態時,產生效果,通常都是使用在<input>
輸入框。
:nth-child()
,會根據()
條件,影響同級元素樣式的偽類,通常使用在清單、表格這類有規律性的結構做變化。以下範例綠色為有修改樣式,紅色為未修改樣式
(3)
,代表同級元素第三個做樣式。(odd)
,代表同級元素中的基數列做樣式。(even)
代表同級元素中的偶數列做樣式。(3n + 1)
,代表每 3 個為一組,每組第 1 個做樣式,n 的起始值為 0 。偽元素就更妙了,原本 HTML 結構上沒有,但利用偽元素憑空造出一個虛幻的元素,在開發者模式下,只看到::before
與::after
,到底有還沒有,偽元素的好處就是讓 HTML 結構更加簡單清楚,還感覺自己更厲害了。
這邊就舉最常用的兩個偽元素,通常偽元素的使用實際是想讓 HTML 結構更簡單,避免太多無意義的標籤。
使用方法為需在前面加::
前綴,以<div>
標籤作為範例:div::after { content: ''; css... }
,其中偽元素要添加 content: '';
,否則沒效果。
::after
,在元素後面安插新的元素,前一篇有介紹脫離文檔流的父容器攤縮問題,需使用偽元素(當然還有別的方法,但這個方法比較乾淨),因為在元素後面添加新的元素,剛好支撐了父容器的高度以解決攤縮問題,除了解決攤縮問題,還能製作與一般標籤一樣的事情,如下面按鈕淺藍色的部分。
::before
,在元素前面安插新的元素,與上一個很相似,只是從元素後面變成元素前面,如下面按鈕藍紫色的部分。
偽元素中的 content
是必須要添加的,它代表了偽元素的內容物,通常情況下都是寫一般 string 空字串,當然也有很多值可以寫,但這就需要研究了。
我個人就很喜歡利用偽元素來自製 icon,並透過 CSS 動畫優化。如手機上常出現的漢堡按鈕。
選擇器大致上都介紹得差不多了!
這裡剛好補充一下屬性選擇器,屬性選擇器也有點類似於偽類選擇器,同樣都是要搭配其他選擇器才能使用,不過他是屬於把選擇器條件範圍縮小,平時就有效果了,並不像偽類選擇器平時沒效果。
因為我平時很少使用,但想說都介紹選擇器了,也覺得屬性選擇器可能有時候有奇效,所以簡單介紹。
使用方法是屬性用[key = value]
來縮小範圍。
input[type="checkbox"]
,鎖定複選框套入樣式。a[url^="https://ithelp.ithome.com.tw/"]
,選定超連結網址開頭是https://ithelp.ithome.com.tw/
套入樣式^
,表示開頭要包含的條件,如url^=https://
,網址符合 HTTPS 協定的套入樣式$
,表示結尾要包含的條件,如src$="png"
,PNG 圖檔的套入樣式*
,表示字串中只要有符合的條件,如url*=google
,網址中有 google 的套入樣式從一開始到現在,我們已經把最基礎的切版技能都瞭解了,明天將進入切版重頭戲 RWD 響應式網頁設計章節!